<!DOCTYPE html>
<html>
<head>
    <meta content="text/html; charset=UTF-8" http-equiv="content-type">
    <title>Geolocation</title>
    <script type="text/javascript"
        src="http://maps.googleapis.com/maps/api/js?sensor=true"></script>
    <script type="text/javascript">



    </script>
</head>
<body>
你的位置信息：
<div id="geo" style="color: #A2BA49;font-weight: bold;">请稍后...</div>
<div id="add" style="color: #A2BA49;font-weight: bold;">请稍后...</div>
<div id="map_canvas" style="width: 500px; height: 300px"></div>
<pre>
Geolocation API
    获得当前位置
    navigator.geolocation.getCurrentPosition(success_callback_function, error_callback_function, position_options)
    位置更新（当位置改变时）
    navigator.geolocation.watchPosition(success_callback_function, error_callback_function, position_options)
    清除位置更新
    navigator.geolocation.clearWatch(watch_position_id)
    success_callback_function函数的参数对象 position
        latitude——纬度
        longitude——精度
        accuracy——精确度，单位米
      可能值
        altitude——高度，单位米
        altitudeAccuracy——高度的精确地，单位米
        heading—运动的方向，相对于正北方向的角度
        speed——运动的速度（假设你在地平线上运动），单位米/秒
    handleLocationError error.code
        UNKNOWN_ERROR (error code 0) —— 错误不在如下三种之内，你可以使用error.message获取错误详细信息。
        PERMISSION_DENIED (error code 1)—— 用不选择不共享地理位置
        POSITION_UNAVAILABLE (error code 2) ——无法获取当前位置
        TIMEOUT (error code 3) ——在指定时间无法获取位置会触发此错误。
    position_options=={}
        enableHighAccuracy：true/false
        maximumAge：单位毫秒，告诉设备缓存时间
        timeout：单位毫秒，超时时间
        
</pre>
<script type="text/javascript">
    var geo = document.getElementById('geo');
    var add = document.getElementById('add');
    var geolocation = navigator.geolocation;
    var msg = '';
    if (geolocation) {
        var option={timeout:10000}
        navigator.geolocation.getCurrentPosition(updateLocation,handleLocationError,option);

    }
    function updateLocation(position) {
        console.dir(position);
        var latitude = position.coords.latitude;
        var longitude = position.coords.longitude;
        var accuracy = position.coords.accuracy;
        var altitude = position.coords.altitude;
        if (!latitude || !longitude) {
            msg='暂时无法获取';
            return;
        }
        if(typeof position.address !== "undefined"){
                var country = position.address.country;
                var province = position.address.region;
                var city = position.address.city;
                var street = position.address.street;
                var streetNumber = position.address.streetNumber;
                msg+=(' 您位于 ' + country + province  + city +street+streetNumber)+'<br>';
        }

        msg+='经度：'+latitude+'<br>';
        msg+='纬度：'+longitude+'<br>';
        msg+='精确度：'+accuracy+'m<br>';
        if(altitude)msg+='高度：'+altitude+'m<br>';


         
        var latlng = new google.maps.LatLng(latitude,longitude );
            var myOptions = {
            zoom: 20,
            center: latlng,
            mapTypeId: google.maps.MapTypeId.ROADMAP
          };

        
        var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

        map.setCenter(latlng);
        var geocoder = new google.maps.Geocoder();
            geocoder.geocode({'latLng': latlng}, function(results, status) {
               add.innerHTML=results[0].formatted_address;
            });
        geo.innerHTML=msg;
    }
  
    function handleLocationError(error){
        switch(error.code){
            case 0:{
                msg=error.message;
                break;
            }
            case 1:{
                msg='您拒绝了共享地址位置！';
                break;
            }
            case 2:{
                msg='获取位置失败！';
                break;
            }
            case 3:{
                msg='获取位置超时！';
                break;
            }
        }
        geo.innerHTML=msg;
    }

</script>
</body>
</html>